<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ArrowLeft } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';


/**
 * 此页面对应订单详情页
 */


const route = useRoute();
const router = useRouter();

// 获取订单ID
const orderId = ref(route.params.id as string);

// 模拟订单数据
const orderData = ref({
  id: '304203022334',
  waybillNumber: 'A2-1-20',
  creatorName: '张三',
  createTime: '2025-06-04 19:00:00',
  senderStation: '义乌站',
  destinationStation: '贵州站',
  transferStation: '-',
  deliveryMethod: '送货上门',
  status: 'in_transit',
  sender: {
    name: '张三',
    phone: 'XXXXXXXXXX',
    address: '义乌市场2层101'
  },
  receiver: {
    name: '张三',
    phone: 'XXXXXXXXXX',
    address: '贵州遵义第一小学'
  },
  vehicle: {
    plateNumber: '浙G10923',
    type: '小型客车',
    length: 3,
    driverName: '张三',
    driverPhone: 'XXXXXXXXXX'
  },
  cargo: [
    {
      id: 1,
      name: '服饰百货',
      package: '纸箱',
      quantity: 12,
      weight: 109,
      volume: 12
    },
    {
      id: 2,
      name: '服饰百货',
      package: '纸箱',
      quantity: 12,
      weight: 109,
      volume: 12
    }
  ],
  fees: {
    deliveryFee: '-',
    pickupFee: '-',
    returnFee: '-',
    transferFee: '-',
    declaredValue: '-',
    insuranceFee: '-',
    packagingFee: '-',
    otherFees: '-'
  },
  other: {
    transportMethod: '-',
    remark: '-',
    imageUrl: '-'
  },
  totalQuantity: 0,
  totalWeight: '0kg',
  totalVolume: '12方'
});

// 根据状态获取标签类型
const getStatusTagType = (status: string) => {
  const statusMap: Record<string, string> = {
    waiting_load: 'warning',
    waiting_accept: 'info',
    waiting_pickup: 'info',
    in_transit: 'primary',
    waiting_sign: 'warning',
    completed: 'success',
    cancelled: 'danger'
  };
  return statusMap[status] || 'info';
};

// 状态文本映射
const statusTextMap: Record<string, string> = {
  waiting_load: '待配载',
  waiting_accept: '待接单',
  waiting_pickup: '待提货',
  in_transit: '运输中-货物在途运输（含中转）',
  waiting_sign: '待签收',
  completed: '已完成',
  cancelled: '已取消'
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 计算总数量和总重量
onMounted(() => {
  // 计算总数量
  orderData.value.totalQuantity = orderData.value.cargo.reduce((sum, item) => sum + item.quantity, 0);
});
</script>

<template>
  <div class="order-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button @click="goBack" plain>
        <el-icon><ArrowLeft /></el-icon> 返回
      </el-button>
    </div>
    
    <!-- 状态指示器 -->
    <div class="status-indicator">
      <div class="status-icon">
        <el-icon class="status-icon-circle"><i></i></el-icon>
      </div>
      <div class="status-text">
        <el-tag :type="getStatusTagType(orderData.status)" size="large">
          {{ statusTextMap[orderData.status] }}
        </el-tag>
      </div>
    </div>
    
    <!-- 基础信息 -->
    <div class="info-section">
      <div class="section-header">
        <div class="section-line"></div>
        <h3>基础信息</h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">订单号：</span>
            <span class="value">{{ orderData.id }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">货号：</span>
            <span class="value">{{ orderData.waybillNumber }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">开单人：</span>
            <span class="value">{{ orderData.creatorName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">开单时间：</span>
            <span class="value">{{ orderData.createTime }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">发货站：</span>
            <span class="value">{{ orderData.senderStation }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">到货站：</span>
            <span class="value">{{ orderData.destinationStation }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">中转站：</span>
            <span class="value">{{ orderData.transferStation }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">配送方式：</span>
            <span class="value">{{ orderData.deliveryMethod }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">手机号：</span>
            <span class="value">XXXXXXXXXX</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 发货人和收货人信息 -->
    <div class="dual-info-section">
      <div class="info-card sender-info">
        <div class="info-card-header">
          <el-icon class="info-card-icon sender-icon"><i></i></el-icon>
          <span>发货人信息</span>
        </div>
        <div class="info-card-content">
          <div class="info-line">
            <span class="label">姓名：</span>
            <span class="value">{{ orderData.sender.name }}</span>
          </div>
          <div class="info-line">
            <span class="label">手机号：</span>
            <span class="value">{{ orderData.sender.phone }}</span>
          </div>
          <div class="info-line">
            <span class="label">发货地址：</span>
            <span class="value">{{ orderData.sender.address }}</span>
          </div>
        </div>
      </div>
      <div class="info-swap">
        <el-icon class="swap-icon"><i></i></el-icon>
      </div>
      <div class="info-card receiver-info">
        <div class="info-card-header">
          <el-icon class="info-card-icon receiver-icon"><i></i></el-icon>
          <span>收货人信息</span>
        </div>
        <div class="info-card-content">
          <div class="info-line">
            <span class="label">姓名：</span>
            <span class="value">{{ orderData.receiver.name }}</span>
          </div>
          <div class="info-line">
            <span class="label">手机号：</span>
            <span class="value">{{ orderData.receiver.phone }}</span>
          </div>
          <div class="info-line">
            <span class="label">发货地址：</span>
            <span class="value">{{ orderData.receiver.address }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 车辆信息 -->
    <div class="info-section">
      <div class="section-header">
        <div class="section-line"></div>
        <h3>车辆信息</h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">车牌号：</span>
            <span class="value">{{ orderData.vehicle.plateNumber }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">车型：</span>
            <span class="value">{{ orderData.vehicle.type }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">车长：</span>
            <span class="value">{{ orderData.vehicle.length }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">司机姓名：</span>
            <span class="value">{{ orderData.vehicle.driverName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">手机号：</span>
            <span class="value">{{ orderData.vehicle.driverPhone }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 货物信息 -->
    <div class="info-section">
      <div class="section-header">
        <div class="section-line"></div>
        <h3>货物信息</h3>
      </div>
      <el-table :data="orderData.cargo" border style="width: 100%" stripe>
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="name" label="货物名称" min-width="120" />
        <el-table-column prop="package" label="包装" min-width="100" />
        <el-table-column prop="quantity" label="数量（箱/袋）" min-width="120" />
        <el-table-column prop="weight" label="重量(kg)" min-width="120" />
        <el-table-column prop="volume" label="体积(方)" min-width="120" />
      </el-table>
      <div class="cargo-summary">
        <div class="summary-item">总数量：{{ orderData.totalQuantity }}</div>
        <div class="summary-item">总重量：{{ orderData.totalWeight }}</div>
        <div class="summary-item">总体积：{{ orderData.totalVolume }}</div>
      </div>
    </div>

    <!-- 费用信息 -->
    <div class="info-section">
      <div class="section-header">
        <div class="section-line"></div>
        <h3>费用信息</h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">配送费：</span>
            <span class="value">{{ orderData.fees.deliveryFee }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">提货费：</span>
            <span class="value">{{ orderData.fees.pickupFee }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">回款费：</span>
            <span class="value">{{ orderData.fees.returnFee }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">中转费：</span>
            <span class="value">{{ orderData.fees.transferFee }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">声明价值：</span>
            <span class="value">{{ orderData.fees.declaredValue }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">保价：</span>
            <span class="value">{{ orderData.fees.insuranceFee }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">包装费：</span>
            <span class="value">{{ orderData.fees.packagingFee }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">其他费用：</span>
            <span class="value">{{ orderData.fees.otherFees }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 其他信息 -->
    <div class="info-section">
      <div class="section-header">
        <div class="section-line"></div>
        <h3>其他信息</h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">运输方式：</span>
            <span class="value">{{ orderData.other.transportMethod }}</span>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="info-item">
            <span class="label">订单备注：</span>
            <span class="value">{{ orderData.other.remark }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-item">
            <span class="label">图片：</span>
            <span class="value">{{ orderData.other.imageUrl }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 物流信息 -->
    <div class="info-section">
      <div class="section-header">
        <div class="section-line"></div>
        <h3>物流信息</h3>
      </div>
      <div class="logistics-tracking">
        <!-- 此处可以添加物流跟踪信息的时间轴组件 -->
        <el-empty description="暂无物流信息" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-detail-container {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 100px);
  overflow-y: auto;
}

.back-button {
  margin-bottom: 20px;
}

.status-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.status-icon {
  margin-right: 15px;
}

.status-icon-circle {
  width: 24px;
  height: 24px;
  color: #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 2px solid #409EFF;
}

.info-section {
  margin-bottom: 25px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.section-line {
  width: 4px;
  height: 18px;
  background-color: #409EFF;
  margin-right: 10px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
}

.info-item .label {
  color: #909399;
  min-width: 80px;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
}

.dual-info-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.info-card {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.info-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 600;
}

.info-card-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.sender-icon {
  background-color: #95D475;
  color: #fff;
}

.receiver-icon {
  background-color: #6492F7;
  color: #fff;
}

.info-line {
  display: flex;
  margin-bottom: 10px;
}

.info-line .label {
  color: #909399;
  min-width: 80px;
}

.info-line .value {
  color: #303133;
}

.info-swap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
}

.swap-icon {
  width: 30px;
  height: 30px;
  color: #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ECF5FF;
  border: 1px solid #D9ECFF;
}

.cargo-summary {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.summary-item {
  margin-left: 20px;
  font-weight: bold;
}

.logistics-tracking {
  min-height: 100px;
}
</style>